<template>
	<n-config-provider
		:class="{ 'layout-back': styleMode !== 'diablo' }"
		:theme="theme"
		:theme-overrides="themeOverrides"
	>
		<n-loading-bar-provider>
			<n-dialog-provider>
				<n-notification-provider>
					<n-message-provider>
						<n-theme-editor>
							<n-config>
								<router-view />
							</n-config>
						</n-theme-editor>
					</n-message-provider>
				</n-notification-provider>
			</n-dialog-provider>
		</n-loading-bar-provider>
		<n-global-style />
	</n-config-provider>
</template>

<script lang="ts" setup>
import { computed, onBeforeMount } from "vue";
import { darkTheme, NThemeEditor } from "@/naive-ui";
import { NConfig } from "@/naive-ui";
import { useStore } from "@/store";
import { useApp } from "@/hooks";
import type { StyleMode } from "@model/store";
import type { DarkTheme, GlobalThemeOverrides } from "@/naive-ui";

const store = useStore();
const app = useApp();

const info = "项目地址：https://gitee.com/yangxin11010/vue-naive-admin";
const style = "font-size: 12px;color: #333;";

const styleMode = computed<StyleMode>(() => store.getters["setting/styleMode"]);
const theme = computed<null | DarkTheme>(() => {
	return styleMode.value === "diablo" ? darkTheme : null;
});
const themeOverrides = computed<GlobalThemeOverrides>(() => {
	return {
		common: {
			baseColor: "#fff",
			primaryColor: "#409EFF",
			primaryColorHover: "#66b1ff",
			primaryColorPressed: "#1989fa",
			primaryColorSuppl: "#2080f0",
			successColor: "#67c23a",
			successColorHover: "#85c161",
			successColorPressed: "#18a058",
			successColorSuppl: "#67C23A",
			infoColor: "#909399",
			infoColorHover: "#a6a9ad",
			infoColorPressed: "#909399",
			infoColorSuppl: "#909399",
			warningColor: "#e6a23c",
			warningColorHover: "#ebb563",
			warningColorPressed: "#f0a020",
			warningColorSuppl: "#e6a23c",
			errorColor: "#f56c6c",
			errorColorHover: "#f78989",
			errorColorPressed: "#d03050",
			errorColorSuppl: "#f56c6c",
		},
	};
});

onBeforeMount(() => {
	console.log(app);
	console.log("%c%s", style, info);
});
</script>

<style lang="scss">
@import "@/style/index.scss";
@import "@/style/reactive.scss";
@import "@/style/naive.scss";
@import "@/style/animation.scss";
@import "@/style/np-icons.scss";
@import "@/style/el-element-ui.scss";
@import "@/style/config.scss";

.n-config-provider {
	width: 100%;
	height: 100%;
	&.layout-back .n-layout {
		background-color: #f0f2f5;
	}
}
</style>
